<template>
  <div class="analysis-container">
    <!-- 工具栏 -->
    <div class="toolbar">
      <h2>数据分析</h2>
      <div class="toolbar-actions">
        <el-button type="primary" @click="handleRefresh" size="small">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
        <el-button @click="handleExport" size="small">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>

    <!-- 主要布局 -->
    <div class="analysis-layout">
      <!-- 字段面板 -->
      <div class="fields-panel">
        <div class="field-group">
          <h3>维度字段</h3>
          <div class="field-list">
            <div 
              v-for="field in dimensionFields" 
              :key="field.key"
              class="field-item dimension-field"
              draggable="true"
              @dragstart="handleDragStart($event, field)"
            >
              <el-icon><Grid /></el-icon>
              {{ field.label }}
            </div>
          </div>
        </div>
        
        <div class="field-group">
          <h3>度量字段</h3>
          <div class="field-list">
            <div 
              v-for="field in metricFields" 
              :key="field.key"
              class="field-item metric-field"
              draggable="true"
              @dragstart="handleDragStart($event, field)"
            >
              <el-icon><DataAnalysis /></el-icon>
              {{ field.label }}
            </div>
          </div>
        </div>
      </div>

      <!-- 拖拽区域 -->
      <div class="drop-zones">
        <!-- 筛选器 -->
        <div class="drop-zone">
          <h4>筛选器</h4>
          <div 
            class="drop-area"
            @drop="handleDrop($event, 'filters')"
            @dragover.prevent
            @dragenter.prevent
          >
            <div v-if="filters.length === 0" class="drop-placeholder">
              将字段拖拽到此处作为筛选条件
            </div>
            <div v-else class="dropped-fields">
              <div 
                v-for="(field, index) in filters" 
                :key="index"
                class="dropped-field filter-field"
              >
                {{ field.label }}
                <el-icon @click="removeField('filters', index)" class="remove-icon"><Close /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 行 -->
        <div class="drop-zone">
          <h4>行</h4>
          <div 
            class="drop-area"
            @drop="handleDrop($event, 'rows')"
            @dragover.prevent
            @dragenter.prevent
          >
            <div v-if="rows.length === 0" class="drop-placeholder">
              将字段拖拽到此处作为行维度
            </div>
            <div v-else class="dropped-fields">
              <div 
                v-for="(field, index) in rows" 
                :key="index"
                class="dropped-field row-field"
              >
                {{ field.label }}
                <el-icon @click="removeField('rows', index)" class="remove-icon"><Close /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 列 -->
        <div class="drop-zone">
          <h4>列</h4>
          <div 
            class="drop-area"
            @drop="handleDrop($event, 'columns')"
            @dragover.prevent
            @dragenter.prevent
          >
            <div v-if="columns.length === 0" class="drop-placeholder">
              将字段拖拽到此处作为列维度
            </div>
            <div v-else class="dropped-fields">
              <div 
                v-for="(field, index) in columns" 
                :key="index"
                class="dropped-field column-field"
              >
                {{ field.label }}
                <el-icon @click="removeField('columns', index)" class="remove-icon"><Close /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 数值 -->
        <div class="drop-zone">
          <h4>数值</h4>
          <div 
            class="drop-area"
            @drop="handleDrop($event, 'values')"
            @dragover.prevent
            @dragenter.prevent
          >
            <div v-if="values.length === 0" class="drop-placeholder">
              将字段拖拽到此处作为数值
            </div>
            <div v-else class="dropped-fields">
              <div 
                v-for="(field, index) in values" 
                :key="index"
                class="dropped-field value-field"
              >
                {{ field.label }}
                <el-icon @click="removeField('values', index)" class="remove-icon"><Close /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 配置面板 -->
      <div class="config-panel">
        <div class="config-group">
          <h4>显示选项</h4>
          <el-checkbox v-model="showGrandTotal">显示总计</el-checkbox>
          <el-checkbox v-model="showSubtotal">显示小计</el-checkbox>
          <el-checkbox v-model="showPercentage">显示百分比</el-checkbox>
        </div>
        
        <div class="config-group">
          <h4>汇总方式</h4>
          <el-radio-group v-model="aggregationType" size="small">
            <el-radio label="sum">求和</el-radio>
            <el-radio label="avg">平均值</el-radio>
            <el-radio label="count">计数</el-radio>
            <el-radio label="max">最大值</el-radio>
            <el-radio label="min">最小值</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 结果展示区域 -->
    <div class="results-panel">
      <div class="results-header">
        <h3>分析结果</h3>
        <div class="results-actions">
          <el-button size="small" @click="handleClearAll">清空所有</el-button>
          <el-button type="primary" size="small" @click="handleAnalyze">开始分析</el-button>
        </div>
      </div>

      <!-- 汇总卡片 -->
      <div v-if="summaryData.length > 0" class="summary-cards">
        <div 
          v-for="(item, index) in summaryData" 
          :key="index"
          class="summary-card"
        >
          <div class="summary-label">{{ item.label }}</div>
          <div class="summary-value">{{ item.value }}</div>
          <div class="summary-change" :class="item.changeType">
            {{ item.change }}
          </div>
        </div>
      </div>

      <!-- 数据透视表 -->
      <div v-if="pivotTableData.length > 0" class="table-container">
        <el-table
          :data="pivotTableData"
          border
          stripe
          style="width: 100%"
          :height="tableHeight"
          show-summary
          :summary-method="getPivotSummaries"
        >
          <el-table-column 
            v-for="column in dynamicColumns" 
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
            :align="column.align || 'left'"
            :sortable="column.sortable"
          >
            <template #header v-if="column.hasIcon">
              <div class="custom-header">
                <el-icon><component :is="column.icon" /></el-icon>
                {{ column.label }}
              </div>
            </template>
            <template #default="scope" v-if="column.formatter">
              {{ scope && scope.row ? column.formatter(scope.row[column.prop]) : '' }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 结果页脚 -->
      <div class="results-footer">
        <div class="results-info">
          <span class="record-count">共 {{ pivotTableData.length }} 条记录</span>
          <span class="query-time">查询时间: {{ queryTime }}ms</span>
        </div>
        <el-pagination
          v-if="pivotTableData.length > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagination.total"
          background
          small
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Refresh, Download, Grid, DataAnalysis, Close } from '@element-plus/icons-vue'

export default {
  name: 'Analysis',
  components: {
    Refresh,
    Download,
    Grid,
    DataAnalysis,
    Close
  },
  data() {
    return {
      // 可拖拽的字段
      dimensionFields: [
        { key: 'date', label: '日期', type: 'dimension' },
        { key: 'documentNumber', label: '单据编号', type: 'dimension' },
        { key: 'store', label: '门店名称', type: 'dimension' },
        { key: 'documentType', label: '单据类型', type: 'dimension' },
        { key: 'product', label: '商品', type: 'dimension' },
        { key: 'category', label: '商品分类', type: 'dimension' },
        { key: 'brand', label: '品牌', type: 'dimension' },
        { key: 'supplier', label: '供应商', type: 'dimension' }
      ],
      metricFields: [
        { key: 'quantity', label: '数量', type: 'metric' },
        { key: 'unitPrice', label: '单价', type: 'metric' },
        { key: 'amount', label: '金额', type: 'metric' },
        { key: 'storeAmount', label: '店铺金额', type: 'metric' },
        { key: 'totalAmount', label: '结算金额', type: 'metric' },
        { key: 'profit', label: '利润', type: 'metric' },
        { key: 'profitRate', label: '利润率', type: 'metric' }
      ],
      
      // 拖拽区域的字段
      filters: [],
      rows: [],
      columns: [],
      values: [],
      
      // 配置选项
      showGrandTotal: true,
      showSubtotal: false,
      showPercentage: false,
      aggregationType: 'sum',
      
      // 结果数据
      summaryData: [],
      pivotTableData: [],
      dynamicColumns: [],
      tableHeight: 400,
      queryTime: 0,
      
      // 原始数据
      rawData: [
        {
          date: '2024-08-06',
          documentNumber: 'E1035568',
          store: '卡罗商贸门市区',
          documentType: '销售单',
          product: '商品A',
          category: '电子产品',
          brand: '品牌A',
          supplier: '供应商A',
          quantity: 1,
          unitPrice: 199.00,
          amount: 299.00,
          storeAmount: 299.00,
          totalAmount: 299.00,
          profit: 50.00,
          profitRate: 0.167
        },
        {
          date: '2024-08-06',
          documentNumber: 'E2309957',
          store: '卡罗商贸门市区',
          documentType: '销售单',
          product: '商品B',
          category: '服装',
          brand: '品牌B',
          supplier: '供应商B',
          quantity: 1,
          unitPrice: 199.00,
          amount: 399.00,
          storeAmount: 399.00,
          totalAmount: 399.00,
          profit: 80.00,
          profitRate: 0.200
        },
        {
          date: '2024-08-06',
          documentNumber: 'F2008602',
          store: '卡罗商贸门市区',
          documentType: '销售单',
          product: '商品C',
          category: '家居用品',
          brand: '品牌C',
          supplier: '供应商C',
          quantity: 1,
          unitPrice: 199.00,
          amount: 599.00,
          storeAmount: 599.00,
          totalAmount: 599.00,
          profit: 120.00,
          profitRate: 0.200
        },
        {
          date: '2024-08-07',
          documentNumber: 'F2008629',
          store: '卡罗商贸门市区',
          documentType: '销售单',
          product: '商品A',
          category: '电子产品',
          brand: '品牌A',
          supplier: '供应商A',
          quantity: 2,
          unitPrice: 398.00,
          amount: 542.00,
          storeAmount: 542.00,
          totalAmount: 542.00,
          profit: 100.00,
          profitRate: 0.184
        },
        {
          date: '2024-08-07',
          documentNumber: 'F2008635',
          store: '其他门店',
          documentType: '销售单',
          product: '商品B',
          category: '服装',
          brand: '品牌B',
          supplier: '供应商B',
          quantity: 2,
          unitPrice: 398.00,
          amount: 768.00,
          storeAmount: 768.00,
          totalAmount: 768.00,
          profit: 150.00,
          profitRate: 0.195
        }
      ],
      
      // 分页配置
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      
      // 拖拽相关
      draggedField: null
    }
  },
  
  methods: {
    // 拖拽开始
    handleDragStart(event, field) {
      this.draggedField = field
      event.dataTransfer.setData('text/plain', JSON.stringify(field))
    },
    
    // 拖拽放置
    handleDrop(event, targetZone) {
      event.preventDefault()
      if (!this.draggedField) return
      
      // 检查是否已存在
      const exists = this[targetZone].some(f => f.key === this.draggedField.key)
      if (!exists) {
        this[targetZone].push({ ...this.draggedField })
      }
      
      this.draggedField = null
    },
    
    // 移除字段
    removeField(zone, index) {
      this[zone].splice(index, 1)
      this.handleAnalyze() // 自动重新分析
    },
    
    // 刷新数据
    handleRefresh() {
      console.log('刷新数据')
      this.handleAnalyze()
    },
    
    // 导出数据
    handleExport() {
      console.log('导出分析结果')
      // 实现导出功能
    },
    
    // 清空所有字段
    handleClearAll() {
      this.filters = []
      this.rows = []
      this.columns = []
      this.values = []
      this.pivotTableData = []
      this.summaryData = []
      this.dynamicColumns = []
    },
    
    // 开始分析
    handleAnalyze() {
      const startTime = Date.now()
      
      // 如果没有配置任何字段，清空结果
      if (this.rows.length === 0 && this.columns.length === 0 && this.values.length === 0) {
        this.pivotTableData = []
        this.summaryData = []
        this.dynamicColumns = []
        return
      }
      
      // 生成数据透视表
      this.generatePivotTable()
      
      // 生成汇总卡片
      this.generateSummaryCards()
      
      this.queryTime = Date.now() - startTime
      this.pagination.total = this.pivotTableData.length
    },
    
    // 生成数据透视表
    generatePivotTable() {
      let data = [...this.rawData]
      
      // 应用筛选器
      this.filters.forEach(filter => {
        // 这里可以实现具体的筛选逻辑
      })
      
      // 如果只有数值字段，显示汇总
      if (this.rows.length === 0 && this.columns.length === 0 && this.values.length > 0) {
        const summary = {}
        this.values.forEach(valueField => {
          const values = data.map(item => Number(item[valueField.key]) || 0)
          summary[valueField.key] = this.calculateAggregation(values)
        })
        this.pivotTableData = [{ ...summary, _type: 'summary' }]
      } else {
        // 按行字段分组
        const grouped = this.groupData(data, this.rows.map(r => r.key))
        this.pivotTableData = this.flattenGroupedData(grouped)
      }
      
      // 生成动态列
      this.generateDynamicColumns()
    },
    
    // 数据分组
    groupData(data, groupKeys) {
      if (groupKeys.length === 0) return data
      
      const grouped = {}
      data.forEach(item => {
        const key = groupKeys.map(k => item[k]).join('|')
        if (!grouped[key]) {
          grouped[key] = []
        }
        grouped[key].push(item)
      })
      
      return grouped
    },
    
    // 扁平化分组数据
    flattenGroupedData(grouped) {
      const result = []
      
      Object.keys(grouped).forEach(key => {
        const items = grouped[key]
        const keyParts = key.split('|')
        const row = {}
        
        // 设置行维度值
        this.rows.forEach((rowField, index) => {
          row[rowField.key] = keyParts[index]
        })
        
        // 计算数值字段
        this.values.forEach(valueField => {
          const values = items.map(item => Number(item[valueField.key]) || 0)
          row[valueField.key] = this.calculateAggregation(values)
        })
        
        result.push(row)
      })
      
      return result
    },
    
    // 计算聚合值
    calculateAggregation(values) {
      switch (this.aggregationType) {
        case 'sum':
          return values.reduce((a, b) => a + b, 0)
        case 'avg':
          return values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0
        case 'count':
          return values.length
        case 'max':
          return Math.max(...values)
        case 'min':
          return Math.min(...values)
        default:
          return values.reduce((a, b) => a + b, 0)
      }
    },
    
    // 生成动态列
    generateDynamicColumns() {
      this.dynamicColumns = []
      
      // 添加行维度列
      this.rows.forEach(rowField => {
        this.dynamicColumns.push({
          prop: rowField.key,
          label: rowField.label,
          width: 120,
          sortable: true
        })
      })
      
      // 添加数值列
      this.values.forEach(valueField => {
        this.dynamicColumns.push({
          prop: valueField.key,
          label: valueField.label,
          width: 120,
          align: 'right',
          sortable: true,
          formatter: (value) => {
            if (valueField.key.includes('Rate')) {
              return (value * 100).toFixed(2) + '%'
            } else if (valueField.key === 'quantity') {
              return parseFloat(value || 0).toLocaleString('zh-CN')
            } else {
              return parseFloat(value || 0).toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
              })
            }
          }
        })
      })
    },
    
    // 生成汇总卡片
    generateSummaryCards() {
      this.summaryData = []
      
      if (this.values.length > 0) {
        this.values.forEach(valueField => {
          const values = this.rawData.map(item => Number(item[valueField.key]) || 0)
          const total = this.calculateAggregation(values)
          
          this.summaryData.push({
            label: valueField.label + '总计',
            value: this.formatValue(total, valueField.key),
            change: '+12.5%',
            changeType: 'positive'
          })
        })
      }
    },
    
    // 格式化值
    formatValue(value, fieldKey) {
      if (fieldKey.includes('Rate')) {
        return (value * 100).toFixed(2) + '%'
      } else if (fieldKey === 'quantity') {
        return parseFloat(value || 0).toLocaleString('zh-CN')
      } else {
        return parseFloat(value || 0).toLocaleString('zh-CN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        })
      }
    },
    
    // 数据透视表合计方法
    getPivotSummaries(param) {
      if (!param || !param.columns || !param.data) {
        return []
      }
      
      const { columns, data } = param
      const sums = []
      
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        
        // 检查是否是数值字段
        const isValueField = this.values.some(v => v.key === column.property)
        if (!isValueField) {
          sums[index] = ''
          return
        }
        
        const values = data.map(item => Number(item && item[column.property]) || 0)
        const sum = this.calculateAggregation(values)
        sums[index] = this.formatValue(sum, column.property)
      })
      
      return sums
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
    }
  },
  
  mounted() {
    // 初始化时显示一些默认数据
    this.rows = [{ key: 'store', label: '门店名称', type: 'dimension' }]
    this.values = [{ key: 'totalAmount', label: '结算金额', type: 'metric' }]
    this.handleAnalyze()
  }
}
</script>

<style scoped>
.analysis-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toolbar h2 {
  margin: 0;
  color: #333;
}

.analysis-layout {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.fields-panel {
  width: 250px;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.field-group {
  margin-bottom: 20px;
}

.field-group h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: move;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: all 0.2s;
}

.dimension-field {
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  color: #1976d2;
}

.dimension-field:hover {
  background: #bbdefb;
}

.metric-field {
  background: #f3e5f5;
  border: 1px solid #ce93d8;
  color: #7b1fa2;
}

.metric-field:hover {
  background: #ce93d8;
}

.drop-zones {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 15px;
}

.drop-zone {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.drop-zone h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.drop-area {
  min-height: 80px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  padding: 10px;
  transition: all 0.2s;
}

.drop-area:hover {
  border-color: #409eff;
  background: #f0f9ff;
}

.drop-placeholder {
  color: #999;
  text-align: center;
  padding: 20px;
  font-size: 13px;
}

.dropped-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dropped-field {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.filter-field {
  background: #fff3cd;
  border-color: #ffeaa7;
}

.row-field {
  background: #d4edda;
  border-color: #c3e6cb;
}

.column-field {
  background: #cce5ff;
  border-color: #99d6ff;
}

.value-field {
  background: #ffe6cc;
  border-color: #ffcc99;
}

.remove-icon {
  cursor: pointer;
  color: #999;
  margin-left: 5px;
}

.remove-icon:hover {
  color: #f56c6c;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.config-panel {
  width: 200px;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.config-group {
  margin-bottom: 20px;
}

.config-group h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.config-group .el-checkbox {
  display: block;
  margin-bottom: 8px;
}

.config-group .el-radio {
  display: block;
  margin-bottom: 8px;
}

.results-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.results-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.results-actions {
  display: flex;
  gap: 10px;
}

/* 汇总卡片样式 */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.summary-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.summary-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1;
}

.summary-change {
  font-size: 12px;
  font-weight: 500;
}

.summary-change.positive {
  color: #4ade80;
}

.summary-change.negative {
  color: #f87171;
}

.summary-change.neutral {
  color: #94a3b8;
}

/* 表格容器样式 */
.table-container {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.custom-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.custom-header i {
  color: #409eff;
  cursor: help;
}

/* 结果页脚样式 */
.results-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.results-info {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}

.record-count {
  font-weight: 500;
  color: #333;
}

.query-time {
  color: #999;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .analysis-layout {
    flex-direction: column;
  }
  
  .fields-panel,
  .config-panel {
    width: 100%;
  }
  
  .drop-zones {
    grid-template-columns: 1fr;
  }
  
  .summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .results-footer {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .tableHeight {
    height: 300px;
  }
}
</style>